<template>
    <div class="login">
        <!-- 登录头 -->
        <van-nav-bar title="登录" left-arrow @click-left="$router.go(-1)" />
        <!-- 登录核心区域 -->
        <div class="container">
            <div class="title">
                <h3>手机号登录</h3>
                <p>未注册的手机号登录后将自动注册</p>
            </div>

            <div class="form">
                <div class="form-item">
                    <input v-model="mobile" class="inp" maxlength="11" placeholder="请输入手机号码" type="text">
                </div>
                <div class="form-item">
                    <input v-model="picCode" class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">
                    <img v-if="picUrl" :src="picUrl" @click="getPicCode">
                </div>
                <div class="form-item">
                    <input class="inp" placeholder="请输入短信验证码" v-model="msgCode" type="text">
                    <button @click="getCode">
                        {{ second === totalSecond ? '获取验证码' : second + '秒后重新发送' }}
                    </button>
                </div>
            </div>

            <div class="login-btn" @click="login">登录</div>
        </div>
    </div>
</template>

<script>
import { getPicCode, getSmsCode, login } from '@/api/login';

export default {
    data() {
        return {
            picUrl: '',
            picKey: '',
            picCode: '',
            mobile: '',
            msgCode: '',
            totalSecond: 60,//总秒数
            second: 60,//当前秒数
            timer: null
        }
    },
    methods: {
        async getPicCode() {
            const { data: { base64, key } } = await getPicCode()
            this.picUrl = base64
            this.picKey = key
        },
        validate() {
            if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
                this.$toast('请输入正确的手机号')
                return false
            }
            if (!/^\w{4}$/.test(this.picCode)) {
                this.$toast('请输入正确的图形验证码')
                return false
            }
            return true
        },
        async getCode() {
            if (!this.validate()) {
                return
            }
            if (!this.timer && this.second === this.totalSecond) {
                //开启计时
                this.timer = setInterval(() => {
                    this.second--

                    if (this.second < 1) {
                        clearInterval(this.timer)
                        this.timer = null
                        this.second = this.totalSecond
                    }
                }, 1000)
                await getSmsCode(this.picCode, this.picKey, this.mobile)
                //发送请求，获取验证码
                this.$toast('发送成功，请注意查收')
            }
        },
        async login() {
            if (!this.validate()) {
                return
            }
            if (!/^\d{6}$/.test(this.msgCode)) {
                this.$toast('请输入正确的手机验证码')
                return
            }
            const res = await login(this.mobile, this.msgCode)
            this.$store.commit('user/setUserInfo',res.data)
            this.$router.push('/')
            this.$toast('登录成功')
        }
    },
    async created() {
        this.getPicCode()
    },
    destroyed() {
        clearInterval(this.timer)
    }
}
</script>

<style lang="less" scoped>
.container {
    padding: 49px 29px;

    // 标题
    .title {
        margin-bottom: 20px;

        h3 {
            font-size: 26px;
            font-weight: normal;
        }

        p {
            line-height: 40px;
            font-size: 14px;
            color: #b8b8b8;
        }
    }

    // 表单
    .form-item {
        border-bottom: 1px solid #f3f1f2;
        padding: 8px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;

        .inp {
            display: block;
            border: none;
            outline: none;
            height: 32px;
            font-size: 14px;
            flex: 1;
        }

        img {
            width: 94px;
            height: 31px;
        }

        button {
            height: 31px;
            border: none;
            font-size: 13px;
            color: #cea26a;
            background-color: transparent;
            padding-right: 9px;
        }
    }

    .login-btn {
        width: 100%;
        height: 42px;
        margin-top: 39px;
        background: linear-gradient(90deg, #ecb53c, #ff9211);
        border-radius: 39px;
        box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
        letter-spacing: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>